<template>
  <div style="height: 100%" ref="dom"></div>
</template>

<script>
import * as echarts from 'echarts'
import { numAdd } from '@/utils/calulate'

export default {
  data() {
    return {
      myChart: null,
    }
  },

  components: {},
  props: {
    chartData: {
      type: Array,
      default: null,
    },
    lineList: {
      type: Array,
      default: null,
    },
    name: {
      type: String,
      default: '',
    },
    lengthways: {
      type: Boolean,
      default: false,
    },
    chartScorll: {
      type: Boolean,
      default: false,
    },
    height: {
      type: Number,
      default: null,
    },
  },
  mounted() {
    this.createChart()
  },
  computed: {},
  watch: {
    chartData: function (n) {
      this.createChart()
    },
  },
  methods: {
    getOption() {
      let x = [], legendData = [], series = [];
      const option = {
        
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: false,
          // right:0
        },
       
        grid: {
          left: '2%',
          right: this.lengthways ? '10%' : '0',
          bottom: '10%',
          top: this.lengthways ? '0' : '10%',
          containLabel: this.lengthways
        },
        //[
        xAxis: {
          type: 'category',
          data: x,
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLine: {
              show: false, //隐藏y轴
            },
        },
        yAxis: [
          {
            type: 'value',
            show: false,
          },
        ],
        series: [],
      }

      if (this.lineList && this.lineList.length) {
        this.lineList.forEach((v) => {
          series.push({
            name: v.name,
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            },
            barMaxWidth:30,
            data: [],
          })
        })
      } else {
        series.push({
          name: this.name || '',
          type: 'bar',
          label: {
            show: true,
            position: this.lengthways ? 'right':'top'
          },
          barMaxWidth:30,
          data: [],
        })
      }
      this.chartData.forEach((v) => {
        x.push(v.name)
        if (this.lineList && this.lineList.length) {
          this.lineList.forEach((it, i) => {
            series[i].data.push(v[it.key])
          })
        } else {
          series[0].data.push(v.count)
        }
      })

      option.xAxis.data = x
      legendData.length ? (option.legend.data = legendData) : ''
      option.series = series
      // 纵向
      if(this.lengthways){
        let a = option.xAxis
        option.xAxis = option.yAxis
        option.yAxis = a
        option.yAxis.inverse = true
      }
      // 滚动
      if( this.chartScorll ) {
        option.dataZoom =  [
          {
              id: 'dataZoomY',
              type: 'inside',
              yAxisIndex: [0],
              startValue: 0,
              endValue: 6,
              filterMode: 'empty',
              moveOnMouseWheel:true,
              zoomLock:true,
          }
        ]
      }
      return option
    },
    createChart() {
      let option = this.getOption(this.chartData)
      if (!this.myChart) this.myChart = echarts.init(this.$refs.dom)
      window.onresize = this.myChart.resize
      this.myChart.setOption(option)
    },
  },
  computed: {},
  destroyed() {},
}
</script>
<style lang='scss' scoped>

</style>